<template>
  <!-- //条件选择器 -->
  <div class="header">
    <el-row :gutter="20">
      <el-col :span="6">
        <el-select v-model="xuanvalue" class="m-2" placeholder="全部">
          <el-option
            v-for="(item, index) in options"
            :key="index"
            :label="item"
            :value="item"
          /> </el-select
      ></el-col>
      <el-col :span="6">
        <el-input v-model="setinput" placeholder="请输入要搜索的商品"
      /></el-col>
      <el-col :span="3"
        ><el-button type="primary" @click="search">搜索</el-button></el-col
      >
    </el-row>
  </div>
  <el-table
    :data="ctableData"
    style="width: 100%"
    :default-sort="{ prop: 'originprice', order: 'descending' }"
  >
    <el-table-column label="序号" width="80">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <span style="margin-left: 10px">{{ scope.$index + 1 }}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="图片" width="120">
      <template #default="scope">
        <el-image :src="scope.row.img1"></el-image>
      </template>
    </el-table-column>
    <el-table-column label="名称" width="120">
      <template #default="scope">
        <span>{{ scope.row.desc }}</span>
      </template>
    </el-table-column>
    <el-table-column label="品牌" width="80">
      <template #default="scope">
        <span>{{ scope.row.brand }}</span>
      </template>
    </el-table-column>
    <el-table-column
      label="分类"
      width="80"
      prop="category"
      :filters="filterArr"
      :filter-method="filterHandler"
    >
      <template #default="scope">
        <span>{{ scope.row.category }}</span>
      </template>
    </el-table-column>
    <el-table-column label="原价" prop="originprice" sortable width="80">
      <template #default="scope">
        <span>{{ scope.row.originprice }}</span>
      </template>
    </el-table-column>
    <el-table-column label="折扣" prop="discount" sortable width="80">
      <template #default="scope">
        <span>{{ scope.row.discount }}</span>
      </template>
    </el-table-column>
    <el-table-column label="销量" prop="sales" sortable width="80">
      <template #default="scope">
        <span>{{ scope.row.sales }}</span>
      </template>
    </el-table-column>
    <el-table-column label="是否售卖" width="80">
      <template #default="scope">
        <el-switch
          v-model="scope.row.issale"
          :active-value="1"
          :inactive-value="0"
          class="ml-2"
          @click="updateFn(scope.row.proid, 'issale', scope.row.issale)"
          style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
      /></template>
    </el-table-column>
    <el-table-column label="是否秒杀" width="80">
      <template #default="scope">
        <el-switch
          v-model="scope.row.isseckill"
          :active-value="1"
          :inactive-value="0"
          @click="updateFn(scope.row.proid, 'isseckill', scope.row.isseckill)"
          class="ml-2"
          style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
      /></template>
    </el-table-column>
    <el-table-column label="是否推荐" width="80">
      <template #default="scope">
        <el-switch
          v-model="scope.row.isrecommend"
          :active-value="1"
          :inactive-value="0"
          class="ml-2"
          @click="
            updateFn(scope.row.proid, 'isrecommend', scope.row.isrecommend)
          "
          style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
      /></template>
    </el-table-column>
    <el-table-column label="Operations">
      <template #default="scope">
        <el-button
          size="small"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)"
          >删除</el-button
        >
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
    background
    layout="prev, pager, next"
    v-model:current-page="count"
    :total="total"
    @current-change="changea"
  />
</template> 

<script>
import { chanpinlb, tuijian, sousuo, searchpro } from "@/api/chanpin.js";
// import { tuijian } from "../../api/chanpin";
export default {
  name: "",
  data() {
    return {
      // currentpage: 1,
      // Search: "",
      total: 0,
      count: 1, //当前的页数
      limitNum: 10, //每页的数据的条数
      tableData: [], //当前页对应的数据
      filterArr: [], //分类的所有的类别组成的数组
      options: [], //所有的类别组成的数租
      setinput: "", //搜索狂输入关键字
      xuanvalue: "", //选中的分类
    };
  },
  created() {
    //请求产品列表
    this.gitlist();
    //请求分类的数据列表
    sousuo().then((res) => {
      console.log("fenglieshuju", res);
      this.options = res.data.data;
    });
  },
  computed: {
    ctableData() {
      return this.tableData.slice((this.count - 1) * 10, this.count * 10);
    },
  },
  methods: {
    gitlist() {
      //请求产品列表
      searchpro({ category: this.xuanvalue, search: this.setinput }).then(
        (res) => {
          console.log("筛选列表数据", res);
          this.tableData = res.data.data;
          // this.total = res.data.total;
          //将类别筛选出来存到filterArr数组中结构为[{}]
          this.filterArr = this.tableData.map((item) => {
            return item.category;
          });
          this.filterArr = Array.from(new Set(this.filterArr));
          this.filterArr = this.filterArr.map((item) => {
            return { text: item, value: item };
          });
        }
      );
      // tuijian(proid, type, flag).then((res) => {
      //   console.log(res);
      // });
    },
    //删除所用的方法
    handleDelete(index, row) {},
    //分类筛选的方法
    filterHandler(value, row, column) {
      const property = column["property"];
      return row[property] === value;
    },
    updateFn(proid, type, flag) {
      console.log(proid, type, flag);
      tuijian({
        proid,
        type,
        flag,
      }).then((res) => {
        console.log(res);
        this.gitlist();
      });
    },
    changea() {},
    search() {
      console.log(this.setinput, this.xuanvalue);
      this.gitlist();
    },
  },
};
</script>
<style lang="scss" scoped>
:deep(.el-scrollbar .cell) {
  height: 90px;
  overflow: hidden;
}
.header {
  margin-bottom: 20px;
}
</style>